<template>
    <div>
        <el-container >
            <el-container>
                <el-main  >
                    <el-card class="page-card">
                        <el-row :gutter="20" class="mt-4">
                            <el-col :span="6">
                                <el-statistic :value="studentCount" title="学员总数"/>
                            </el-col>
                            <el-col :span="6">
                                <el-statistic :value="coachCount" title="教练总数"/>
                            </el-col>
                            <el-col :span="6">
                                <el-statistic :value="programCount" title="课程总数"/>
                            </el-col>
                            <el-col :span="6">
                                <el-statistic :value="32" title="待考学员"/>
                            </el-col>
                        </el-row>
                    </el-card>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import requestUtil from '@/util/request.js'

const studentCount = ref(0)
const coachCount = ref(0)
const programCount = ref(0)
const fetchDashboardData = async () => {
    try {
        const [studentRes, coachRes, programRes] = await Promise.all([
            requestUtil.get('/student/msg', {params: {page: 1, page_size: 1}}),
            requestUtil.get('/coach/msg', {params: {page: 1, page_size: 1}}),
            requestUtil.get('/program/msg', { params: { page: 1, page_size: 1 } })  // 新增请求
        ])

        studentCount.value = studentRes.data.total
        coachCount.value = coachRes.data.total
        programCount.value = programRes.data.total  // 动态设置课程数量

    } catch (error) {
        console.error('获取仪表盘数据失败:', error)
    }
}
function tohome() {
    this.$router.push('/home')
}
onMounted(() => {
    fetchDashboardData()
})
</script>
<style>
.el-main {
  padding: 0 20px!important;
}
.menu-item-link{
    display: inline-block;
    width: 200px;
    text-decoration: none;
}
.page-card {

    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.el-table {
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.el-button {
    border-radius: 6px;
    font-size: 14px;
}
</style>
